<template>
  <el-dialog
    @close="close"
    :visible="show"
    append-to-body
    :close-on-click-modal="false"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(23,69,125,0.9)"
    width="500px"
  >
    <el-form :model="form" :rules="rules" label-width="120px" ref="form">
      <el-form-item label="通道名称" prop="sbmc">
        <el-input v-model="form.sbmc" maxlength="400" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="所在道路" prop="szdl">
        <el-input v-model="form.szdl" maxlength="400" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="通道长度" prop="tdcd">
        <el-input v-model="form.tdcd" maxlength="400" show-word-limit disabled></el-input>
      </el-form-item>
      <!-- <el-form-item label="投运日期" prop="tyrq">
        <el-date-picker
          v-model="form.tyrq"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item label="电力管孔数" prop="dlgks">
        <el-select v-model="form.dlgks" style="width:94%;">
          <el-option
            v-for="item in commonOpts.dlgksOpt"
            :key="item.value"
            :value="item.value"
            :label="item.text"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电力管直径" prop="dlgzj">
        <el-input v-model="form.dlgzj"></el-input>
      </el-form-item>
      <el-form-item label="通讯管孔数" prop="txgks">
        <el-input v-model="form.txgks"></el-input>
      </el-form-item>
      <el-form-item label="通讯管直径" prop="txgzj">
        <el-input v-model="form.txgzj"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="save">设备保存</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dlld',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    getMap: Function,
    type: String,
    params: Object
  },
  data() {
    return {
      loading: false,
      commonOpts: {
        dlgksOpt: [
          { value: 6, text: '6' },
          { value: 8, text: '8' },
          { value: 9, text: '9' },
          { value: 12, text: '12' },
          { value: 16, text: '16' }
        ]
      },
      form: {
        sbmc: '',
        szdl: '',
        tdcd: '',
        tyrq: '2025-12-31',
        dlgks: '',
        dlgzj: '',
        txgks: '',
        txgzj: ''
      },
      rules: {
        sbmc: [{ required: true, message: '请输入通道名称', trigger: 'change' }],
        tdcd: [{ required: true, message: '请输入通道长度', trigger: 'change' }],
        tyrq: [{ required: true, message: '请选择投运日期', trigger: 'change' }],
        dlgks: [{ required: true, message: '请选择电力管孔数', trigger: 'change' }],
        dlgzj: [{ required: true, message: '请输入电力管直径', trigger: 'change' }],
        txgks: [{ required: true, message: '请输入通讯管孔数', trigger: 'change' }],
        txgzj: [{ required: true, message: '请输入通讯管直径', trigger: 'change' }]
      }
    };
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.initParams();
      }
    }
  },
  methods: {
    initParams() {
      this.$nextTick(() => {
        this.form.sbmc = this.params.data.sbmc;
        this.form.tdcd = Number(Number(this.params.data.tdcd).toFixed(2));
        if (this.type === 'add') {
          let defaultOpts = this.params.defaultOptions;
          this.form.dlgks = defaultOpts.dlgks;
          this.form.dlgzj = defaultOpts.dlgzj;
          this.form.txgks = defaultOpts.txgks;
          this.form.txgzj = defaultOpts.txgzj;
        }
      });
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          let params = Object.assign(
            {
              verRule: this.params.defaultOptions.verRule,
              ssdw: this.params.defaultOptions.ssdw,
              tdlx: this.params.defaultOptions.tdlx
            },
            this.params.data,
            this.form
          );
          console.log(params);
          if (this.type === 'add') {
            this.getMap()
              .api.PwghGhsjTxfw.Dlld.post_Dlld_saveDlldJh({ params: params })
              .then((res) => {
                this.loading = false;
                if (res.resp_code === 200) {
                  this.$message({
                    type: 'success',
                    message: '保存' + this.form.sbmc + '成功'
                  });
                }
                this.close();
              });
          } else if (this.type === 'edit') {
            this.getMap()
              .api.PwghGhsjTxfw.Dlld.post_Dlld_modifyDlldJh({ params: params })
              .then((res) => {
                this.loading = false;
                if (res.resp_code === 200) {
                  this.$message({
                    type: 'success',
                    message: '修改' + this.form.sbmc + '成功'
                  });
                }
                this.close();
              });
          }
        }
      });
    },
    close() {
      this.$refs.form.resetFields();
      this.$emit('update:show', false);
      this.$emit('refresh');
    }
  }
};
</script>

<style lang="less" scoped></style>
